<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 组件</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
    </div>

    <script src="../Day1/js/vue.js"></script>

    <script>
        //组件注册注意项
        //1.组件的data参数值必须是函数
        //2.组件模板必须是单个根元素
        //3.组件模板内容可以是模板字符串

        Vue.component('button-counter',{
           data:function(){
                return{
                    count:8
                }
            },
            template:`<div>
                <h2>计数器:{{count}}</h2>
                <button @click='handle(count++)'>+</button>
                </div>`,
            methods:{
                handle(){
                    //  this.count++
                }
            }

        });


        var vm=new Vue({
            el:'#app',
            data:{
               
            },
        });
    </script>
</body>
</html>